<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.thymeleaf.org/thymeleaf-extras-shiro">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>ComputerERP主页</title>
    <link rel="stylesheet" href="/static/js/layui/css/layui.css">
    <script type="text/javascript" src="/static/js/jquery/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="/static/js/layui/layui.js"></script>
    <script type="text/javascript" src="/static/js/echarts/echarts.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!--    上方导航栏-->
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">ComputerERP</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <!--        <ul class="layui-nav layui-layout-left">-->
        <!--            &lt;!&ndash; 移动端显示 &ndash;&gt;-->
        <!--            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">-->
        <!--                <i class="layui-icon layui-icon-spread-left"></i>-->
        <!--            </li>-->

        <!--            <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>-->
        <!--            <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>-->
        <!--            <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>-->
        <!--            <li class="layui-nav-item">-->
        <!--                <a href="javascript:;">nav groups</a>-->
        <!--                <dl class="layui-nav-child">-->
        <!--                    <dd><a href="">menu 11</a></dd>-->
        <!--                    <dd><a href="">menu 22</a></dd>-->
        <!--                    <dd><a href="">menu 33</a></dd>-->
        <!--                </dl>-->
        <!--            </li>-->
        <!--        </ul>-->
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                <a href="javascript:;">
                    <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a th:href="@{/main/selfinformation}">个人信息</a></dd>
                    <dd><a href="">退出登录</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <!--左侧导航栏-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">进货管理</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/main/purchase/pmanagement}">进货入库</a></dd>
                        <dd><a th:href="@{/main/purchase/omanagement}">退货出库</a></dd>
                        <dd><a th:href="@{/main/purchase/pmanagementorder}">进货单查询</a></dd>
                        <dd><a th:href="@{/main/purchase/omanagementorder}">退货单查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item ">
                    <a href="javascript:;">销售管理</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/main/sales/salesdelivery}">销售出库</a></dd>
                        <dd><a th:href="@{/main/sales/omanagement}">客户退货</a></dd>
                        <dd><a th:href="@{/main/sales/salesorder}">销售单查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item ">
                    <a class="" href="javascript:;">库存管理</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/main/warehouse/damage}">商品报损/报溢</a></dd>
                        <dd><a th:href="@{/main/warehouse/alarm}">库存报警</a></dd>
                        <dd><a th:href="@{/main/warehouse/brimordamage}">报损报溢查询</a></dd>
                        <dd><a th:href="@{/main/warehouse/querywarehouse}">当前库存查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a class="" href="javascript:;">统计报表</a>
                    <dl class="layui-nav-child">
                        <dd><a th:href="@{/main/report/business}">供应商统计报表</a></dd>
                        <dd><a th:href="@{/main/report/buyCount}">商品采购统计</a></dd>
                        <dd><a th:href="@{/main/report/saleCount}">商品销售统计</a></dd>
                        <dd><a th:href="@{/main/report/mouthCount}">月销售统计报表</a></dd>
                        <dd><a th:href="@{/main/report/yearCount}">年销售统计报表</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item ">
                    <a class="" th:href="@{/main/manage/manage}">系统设置</a>
                </li>
            </ul>
        </div>
    </div>
    <!--主体区域-->
    <!--    <div class="layui-body">-->
    <!--        &lt;!&ndash; 内容主体区域 &ndash;&gt;-->
    <!--&lt;!&ndash;        <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>&ndash;&gt;-->
    <!--    </div>-->
    <div class="layui-tab layui-tab-brief">
        <div class="layui-body layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-main">
                    <div id="LAY_layedit_code">
                        <!-- 这里写主体内容-->
                        <div class="layui-col-md6">
                            <div id="mouthCount" style="width: 850px;height:400px;"></div>
                        </div>
                        <div class="layui-col-md6">
                            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                            <div id="mouthCountpie" style="width: 600px;height:400px;"></div>
                        </div>
                    </div>
                    <div class="layui-col-md6">
                        <div id="mouthCountline" style="width: 850px;height:400px;"></div>
                    </div>
                    <div class="layui-col-md6">
                        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                        <div id="" style="width: 600px;height:400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        底部固定区域
    </div>
</div>

<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element
            ,layer = layui.layer
            ,util = layui.util
            ,$ = layui.$;

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function(othis){
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            ,menuRight: function(){
                layer.open({
                    type: 1
                    ,content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                    ,area: ['260px', '100%']
                    ,offset: 'rt' //右上角
                    ,anim: 5
                    ,shadeClose: true
                });
            }
        });
    });
    $(function () {

    });
</script>

<script>
    var myChart = echarts.init(document.getElementById('mouthCount'),'light');
    var colors = ["#1cd389", "#668eff", "#ffc751", "#ff6e73", "#8683e6", "#9692ff"];

    var lineargroup = [
        {
            value: 100,
            name: "目标",
            oriname: "意向",
            number: 987,
            //color: ["rgba(29,211,137,0.8)", "rgba(29,211,137,0)"]
        },
        {
            value: 80,
            name: "方案率",
            oriname: "方案",
            number: 88756,
            // color: ["rgba(102,142,255,0.7)", "rgba(102,142,255,0)"]
        },
        {
            value: 60,
            name: "商務率",
            oriname: "商務",
            number: 78756,
            // color: ["rgba(255,198,82,0.6)", "rgba(255,198,82,0)"]
        },
        {
            value: 40,
            name: "成交率",
            oriname: "即將成交",
            number: 68756,
            // color: ["rgba(255,110,115,0.5)", "rgba(255,110,115,0)"]
        },
        {
            value: 20,
            name: "贏單率",
            oriname: "贏單",
            number: 58756,
            //  color: ["rgba(134,131,230,0.4)", "rgba(134,131,230,0)"]
        },
    ];

    var data1 = [];
    var data2 = [];

    for (var i = 0; i < lineargroup.length; i++) {
        var obj1 = {
            value: lineargroup[i].value,
            num: lineargroup[i].number,
            name: lineargroup[i].oriname,
        };

        var obj2 = {
            value: lineargroup[i].value,
            name: lineargroup[i].name,
            itemStyle: {
                opacity: 0,
                /*normal: {
                          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
                              offset: 0,
                              color: lineargroup[i].color[1]
                          }, {
                              offset: 1,
                              color: lineargroup[i].color[0]
                          }]),
                          borderWidth: 0,
                          opacity: 1
                      }*/
            },
        };
        data1.push(obj1);
        data2.push(obj2);
    }

    var option = {
        color: colors,
        series: [
            {
                top: 0,
                type: "funnel",
                height: "400",
                gap: 0,
                minSize: 150,
                left: "20%",
                width: "60%",
                label: {
                    show: true,
                    position: "inside",
                    fontSize: "14",
                    formatter: function (d) {
                        var ins = d.name + "{aa|}\n" + d.data.num;
                        return ins;
                    },
                    rich: {
                        aa: {
                            padding: [8, 0, 6, 0],
                        },
                    },
                },
                data: data1,
            },
            {
                top: 0,
                type: "funnel",
                height: "400",
                gap: -1,
                minSize: 150,
                left: "20%",
                width: "60%",
                z: 2,
                label: {
                    normal: {
                        color: "#333",
                        position: "right",
                        formatter: function (d) {
                            var ins = "{aa|" + d.name + "}\n{bb|" + d.percent + "%}";
                            return ins;
                        },
                        rich: {
                            aa: {
                                align: "center",
                                color: "#666",
                                fontSize: "12",
                                lineHeight: "30",
                            },
                            bb: {
                                align: "center",
                                color: "#333",
                                fontSize: "22",
                            },
                        },
                    },
                },
                labelLine: {
                    show: false,
                },
                data: data2,
            },
        ],
    };
    myChart.setOption(option);
</script>
<!-- 第二个表 -->
<script>
    var myChart = echarts.init(document.getElementById('mouthCountpie'),'light');
    let bgColor = "#fff";
    let title = "总量";
    let color = ["#0E7CE2", "#FF8352", "#E271DE", "#F8456B", "#00FFFF", "#4AEAB0"];
    let echartData = [
        {
            name: "A类",
            value: "3720",
        },
        {
            name: "B类",
            value: "2920",
        },
        {
            name: "C类",
            value: "2200",
        },
        {
            name: "D类",
            value: "1420",
        },
    ];

    let formatNumber = function (num) {
        let reg = /(?=(\B)(\d{3})+$)/g;
        return num.toString().replace(reg, ",");
    };
    let total = echartData.reduce((a, b) => {
        return a + b.value * 1;
    }, 0);

    option = {
        backgroundColor: bgColor,
        color: color,
        // tooltip: {
        //     trigger: 'item'
        // },
        title: [
            {
                text: "{name|" + title + "}\n{val|" + formatNumber(total) + "}",
                top: "center",
                left: "center",
                textStyle: {
                    rich: {
                        name: {
                            fontSize: 14,
                            fontWeight: "normal",
                            color: "#666666",
                            padding: [10, 0],
                        },
                        val: {
                            fontSize: 32,
                            fontWeight: "bold",
                            color: "#333333",
                        },
                    },
                },
            },
            {
                text: "单位：个",
                top: 20,
                left: 20,
                textStyle: {
                    fontSize: 14,
                    color: "#666666",
                    fontWeight: 400,
                },
            },
        ],
        // legend: {
        //     orient: 'vertical',
        //     icon: 'rect',
        //     x: '80%',
        //     y: 'center',
        //     itemWidth: 12,
        //     itemHeight: 12,
        //     align: 'left',
        //     textStyle: {
        //         rich: {
        //             name: {
        //                 fontSize: 12
        //             },
        //             value: {
        //                 fontSize: 16,
        //                 padding: [0, 5, 0, 15]
        //             },
        //             unit: {
        //                 fontSize: 12
        //             }
        //         }
        //     },
        //     formatter: function(name) {
        //         let res = echartData.filter(v => v.name === name);
        //         res = res[0] || {};
        //         let unit = res.unit || '';
        //         return '{name|' + name + '}  {value|' + res.value + '}{unit|' + unit + '}'
        //     }
        //     // data: legendName
        // },
        series: [
            {
                type: "pie",
                radius: ["45%", "60%"],
                center: ["50%", "50%"],
                data: echartData,
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        borderColor: bgColor,
                        borderWidth: 2,
                    },
                },
                labelLine: {
                    normal: {
                        length: 20,
                        length2: 120,
                        lineStyle: {
                            color: "#e6e6e6",
                        },
                    },
                },
                label: {
                    normal: {
                        formatter: (params) => {
                            return (
                                "{icon|●}{name|" +
                                params.name +
                                "}{value|" +
                                formatNumber(params.value) +
                                "}"
                            );
                        },
                        padding: [0, -100, 25, -100],
                        rich: {
                            icon: {
                                fontSize: 16,
                            },
                            name: {
                                fontSize: 14,
                                padding: [0, 10, 0, 4],
                                color: "#666666",
                            },
                            value: {
                                fontSize: 18,
                                fontWeight: "bold",
                                color: "#333333",
                            },
                        },
                    },
                },
            },
        ],
    };
    myChart.setOption(option);
</script>

<script>
    var myChart = echarts.init(document.getElementById('mouthCountline'),'light');
    /*
最近本人发现了配置更简单，更容易理解，更容易修改，bug更少的写法

所以更新了原图表，这里分享给大家

不知道用以前写法的小伙伴有没有发现

1.项目中如果数据为0的话，hover的时候用以前的写法文字会将圆点盖住...

2.鼠标放上的时候，x轴Pointer文字可能会有些轻微的向上或向下的移动...

3.文字下划线和文字见的距离过小，有的时候不是很符合需求...

以下旧写法我都注释了哈，现在生效的是新写法，新写法我也解释说明了哦

*/

    /*

        这个注释建议看完代码再看哦

        1.如果axisLabel和axisPointer的margin相同，则padding[0]必须等于0

        2.实现效果axisLabel和AxisPointer的字体大小必须相同

        3.此配置实现效果axisLabel和axisPointer的margin必须相同

        其他配置同样可以实现效果，如lineHeight等

        这是我整理、删除多余相同配置项后总结出的，使用方便，便于封装复用

        适用于大多数图表的配置

        更复杂的样式还是要参考配置文档的哦???

    */
    const colorList = ["#9E87FF", "#73DDFF", "#fe9a8b", "#F56948", "#9E87FF"];
    option = {
        backgroundColor: "#fff",
        title: {
            top:'20%',
            text: "5月销售统计",
            textStyle: {
                fontSize: 12,
                fontWeight: 400,
            },
            left: "center",
            top: "5%",
        },
        legend: {
            icon: "circle",
            top: "5%",
            right: "5%",
            itemWidth: 6,
            itemGap: 20,
            textStyle: {
                color: "#556677",
            },
        },
        tooltip: {
            trigger: "axis",
            axisPointer: {
                label: {
                    show: true,
                    backgroundColor: "#fff",
                    color: "#556677",
                    borderColor: "rgba(0,0,0,0)",
                    shadowColor: "rgba(0,0,0,0)",
                    shadowOffsetY: 0,
                },
                lineStyle: {
                    width: 0,
                },
            },
            backgroundColor: "#fff",
            textStyle: {
                color: "#5c6c7c",
            },
            padding: [10, 10],
            extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
        },
        grid: {
            top: "15%",
        },
        xAxis: [
            {
                type: "category",
                data: ["北京", "上海", "广州", "深圳", "香港", "澳门", "台湾"],
                axisLine: {
                    lineStyle: {
                        color: "#DCE2E8",
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: "#556677",
                    },
                    // 默认x轴字体大小
                    fontSize: 12,
                    // margin:文字到x轴的距离
                    margin: 15,
                },
                axisPointer: {
                    label: {
                        // padding: [11, 5, 7],
                        padding: [0, 0, 10, 0],
                        /*
                  除了padding[0]建议必须是0之外，其他三项可随意设置

                  和CSSpadding相同，[上，右，下，左]

                  如果需要下边线超出文字，设左右padding即可，注：左右padding最好相同

                  padding[2]的10:

                  10 = 文字距下边线的距离 + 下边线的宽度

                  如：UI图中文字距下边线距离为7 下边线宽度为2

                  则padding: [0, 0, 9, 0]

                              */
                        // 这里的margin和axisLabel的margin要一致!
                        margin: 15,
                        // 移入时的字体大小
                        fontSize: 12,
                        backgroundColor: {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: "#fff", // 0% 处的颜色
                                },
                                {
                                    // offset: 0.9,
                                    offset: 0.86,
                                    /*
                    0.86 = （文字 + 文字距下边线的距离）/（文字 + 文字距下边线的距离 + 下边线的宽度）

                                            */
                                    color: "#fff", // 0% 处的颜色
                                },
                                {
                                    offset: 0.86,
                                    color: "#33c0cd", // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: "#33c0cd", // 100% 处的颜色
                                },
                            ],
                            global: false, // 缺省为 false
                        },
                    },
                },
                boundaryGap: false,
            },
        ],
        yAxis: [
            {
                type: "value",
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#DCE2E8",
                    },
                },
                axisLabel: {
                    textStyle: {
                        color: "#556677",
                    },
                },
                splitLine: {
                    show: false,
                },
            },
            {
                type: "value",
                position: "right",
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: "#556677",
                    },
                    formatter: "{value}",
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: "#DCE2E8",
                    },
                },
                splitLine: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: "Adidas",
                type: "line",
                data: [10, 10, 30, 12, 15, 3, 7],
                symbolSize: 1,
                symbol: "circle",
                smooth: true,
                yAxisIndex: 0,
                showSymbol: false,
                lineStyle: {
                    width: 5,
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: "#9effff",
                        },
                        {
                            offset: 1,
                            color: "#9E87FF",
                        },
                    ]),
                    shadowColor: "rgba(158,135,255, 0.3)",
                    shadowBlur: 10,
                    shadowOffsetY: 20,
                },
                itemStyle: {
                    normal: {
                        color: colorList[0],
                        borderColor: colorList[0],
                    },
                },
            },
            {
                name: "Nike",
                type: "line",
                data: [5, 12, 11, 14, 25, 16, 10],
                symbolSize: 1,
                symbol: "circle",
                smooth: true,
                yAxisIndex: 0,
                showSymbol: false,
                lineStyle: {
                    width: 5,
                    color: new echarts.graphic.LinearGradient(1, 1, 0, 0, [
                        {
                            offset: 0,
                            color: "#73DD39",
                        },
                        {
                            offset: 1,
                            color: "#73DDFF",
                        },
                    ]),
                    shadowColor: "rgba(115,221,255, 0.3)",
                    shadowBlur: 10,
                    shadowOffsetY: 20,
                },
                itemStyle: {
                    normal: {
                        color: colorList[1],
                        borderColor: colorList[1],
                    },
                },
            },
            {
                name: "老北京布鞋",
                type: "line",
                data: [150, 120, 170, 140, 500, 160, 110],
                symbolSize: 1,
                yAxisIndex: 1,
                symbol: "circle",
                smooth: true,
                showSymbol: false,
                lineStyle: {
                    width: 5,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 0,
                            color: "#fe9a",
                        },
                        {
                            offset: 1,
                            color: "#fe9a8b",
                        },
                    ]),
                    shadowColor: "rgba(254,154,139, 0.3)",
                    shadowBlur: 10,
                    shadowOffsetY: 20,
                },
                itemStyle: {
                    normal: {
                        color: colorList[2],
                        borderColor: colorList[2],
                    },
                },
            },
        ],
    };

    myChart.setOption(option);
</script>
</body>
</html>